<template>
  <div class="cart-list">
<!--    <div class="block" @click="block">-->
<!--      <van-icon name="share" class="go" size="2em"/>-->
<!--    </div>-->
    <van-nav-bar
        title="购物车"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <!-- 设置垂直间距 -->
    <van-row :gutter="[0, 0]" v-for="(cart,index) of cartList">
      <van-col span="2" class="select-all-btn"><input type="checkbox" v-bind:price="cart.quantity" v-model="cart.isChecked"
                                                      @change="handleCheckedAllStatus"></van-col>

      <van-col span="6" class="wrapper-img">

        <van-image
            width="90px"
            height="90px"
            fit="full"
            :src="cart.foodImg"
        />

      </van-col>
      <van-col span="11">
        <div class="name">{{cart.foodName}}</div>
        <div class="price">￥{{cart.foodPrice}}</div>
      </van-col>
      <van-col span="5" class="stepper"><van-stepper v-model="cart.quantity" theme="round" button-size="18" disable-input
                                                     @change="handleQuantityChange" :name="cart.id" @click="handleDelete(index)" min="0"/>
      </van-col>
    </van-row>

    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <input type="checkbox" v-model="isCheckedAll" @change="handleAllInChange(isCheckedAll)" class="select-all-btn"><span>全选</span>
    </van-submit-bar>
  </div>

</template>

<script>
import { showDialog } from "vant";
import { showToast } from "vant";

export default {
   name: "list",
   data() {
     return {
       isCheckedAll: '',
       cartList: [],
     }
   },
  computed: {
    totalPrice() {
      let num = 0;
      for (let cart of this.cartList) {
        num += cart.foodPrice * cart.quantity;
      }
      return num * 100;
    }
  },
  methods: {
     _initCartList() {
       this.$axios.get('/ele_server_war/cart/list').then(({data : res}) => {
         if (res.status == 0) {
           this.cartList = res.data
         } else if (res.status == 3003) {
           showDialog({
             title: '提示',
             message:'当前未登录',
             theme: 'round-button',
             confirmButtonText: '去登录'
           }) .then(() => {
             this.$router.push('/user/login?redirect=/cart/list');
           });
         } else {

         }
       })
     },
    block() {
      this.$router.push('/business/list')
    },
    handleDelete(index){
      if (this.cartList[index].quantity<1){
        this.$axios.get('/ele_server_war/cart/delete').then(({data:res})=>{
          location.reload()
          //  this.$router.go(0);
          // window.location.reload(true);
        })
      }
    },
    handleQuantityChange(quantity,obj) {
       this.$axios.get(`/ele_server_war/cart/updateQuantity?id=${obj.name}&quantity=${quantity}`).then(({data : res}) => {
         if (res.status == 0) {
           showToast('数量修改成功');
         }
       })
    },
    handleAllInChange(checked) {
       for (let  cart of this.cartList) {
         cart.isChecked = checked
       }
    },
    handleCheckedAllStatus() {
       let count = 0;
       for (let cart of this.cartList) {
         if (cart.isChecked) {
           count++
         }
       }

       if (count == this.cartList.length) {
         this.isCheckedAll = true;
       } else {
         this.isCheckedAll = false;
       }
    },
    onSubmit() {
      let checkedCartList = []
      for (let cart of this.cartList) {
        if (cart.isChecked) {
          checkedCartList.push(cart);
        }
      }
      if (checkedCartList.length != 0) {
        localStorage.setItem('setCheckedCartList',JSON.stringify(checkedCartList))
        this.$router.push('/order/confirm')
      } else {
        showToast('请至少选择一条')
      }
    }
  },
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
  created() {
     this._initCartList()
  }
}

</script>

<style scoped lang="stylus">
.cart-list
  .go --van-icon-font-family{
      transition rotate (180deg)
  }
  .van-row
    margin 10px 0
    .check-wrapper, .count-wrapper
      display flex
      justify-content center
      align-items center
</style>